<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
  <head>
    <style type="text/css">v\:* {behavior:url(#default#VML);}</style>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
		
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q" type="text/javascript"></script>
    <script src="./scripts/markermanager.js"></script>
    <script src="../src/dragzoom.js" type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[
    // Globals
    var map;
    var DragZoom;
    var mapCenter = new GLatLng(40.72, -73.95);
    var mapZoom = 10;
    var markerMgr;

    var clusterMarker = 
      {"name":"Manhattan",     "lat":40.78, "lng":-73.97, "zoom":14}
    
    var greenMarkers = [
      {"name":"Central Park Zoo",              "lat":40.7677, "lng":-73.9715},
      {"name":"Central Park Boat House",       "lat":40.7754, "lng":-73.9688},
      {"name":"Jacqueline Onassis Reservoir",  "lat":40.7848, "lng":-73.9616},
      {"name":"Museum of Natural History",     "lat":40.7811, "lng":-73.9738},
      {"name":"Mount Sinai Hospital",          "lat":40.7893, "lng":-73.9538},
      {"name":"CUNY Hunter College",           "lat":40.7684, "lng":-73.9649},
      {"name":"Metropolitan Museum",           "lat":40.7791, "lng":-73.9629}
    ]

    var clusterIcon = new GIcon();
    clusterIcon.shadow = 'images/mm_34_shadow.png';
    clusterIcon.iconSize = new GSize(20, 34);
    clusterIcon.shadowSize = new GSize(37, 34);
    clusterIcon.iconAnchor = new GPoint(10, 34);
    clusterIcon.infoWindowAnchor = new GPoint(9, 2);
    clusterIcon.image = 'images/mm_34_green.png';

    var greenIcon = new GIcon();
    greenIcon.shadow = 'images/mm_20_shadow.png';
    greenIcon.iconSize = new GSize(12, 20);
    greenIcon.shadowSize = new GSize(22, 20);
    greenIcon.iconAnchor = new GPoint(6, 20);
    greenIcon.infoWindowAnchor = new GPoint(5, 1);
    greenIcon.image = 'images/mm_20_green.png';

    // Function to put the cluster marker and the underlying markers into the MM
    function addMarkers() {
      // Add the cluster marker
      var lat = clusterMarker["lat"];
      var lng =  clusterMarker["lng"];
      var zoom =  clusterMarker["zoom"];
      var name =  clusterMarker["name"];
      var point = new GLatLng(lat,lng);
      var marker = new GMarker(point,clusterIcon);
      var minZoom = mapZoom + 1;
      var maxZoom = mapZoom + 3;
      markerMgr.addMarker(marker,minZoom,maxZoom);
      addClusterListeners(marker,lat,lng,zoom);
      // add the green markers
      var markers = [];
      for (var j in greenMarkers) {
        var vars = greenMarkers[j];
        var lat = vars["lat"];
        var lng =  vars["lng"];
        var name =  vars["name"];
        var point = new GLatLng(lat,lng);
        var marker = new GMarker(point,greenIcon);
        markers.push(marker);
        addListeners(marker, name) 
      }
      var minZoom = mapZoom + 4; 
      markerMgr.addMarkers(markers,minZoom);
    }

    // function to add listeners for the markers
    function addListeners(marker, name) {
      GEvent.addListener(marker, "click", function() {
        map.closeInfoWindow();
        var textHTML ='<b>'+name+'</b>';
        marker.openInfoWindowHtml(textHTML);
      });

      return marker; 
    }

    // Function to save the map context via the DragZoomControl method and then zoom in to the (lat,lng)
    // called when the cluster marker is clicked
    function addClusterListeners(marker, lat, lng, zoom) {
      GEvent.addListener(marker, "click", function() {
        map.closeInfoWindow();
        DragZoom.saveMapContext('Cluster Zoom Back');
        map.setCenter(new GLatLng(lat,lng),parseInt(zoom));
        }
      )
      return marker; 
    }

   // Function called after the map context is restored from the cluster zoom
   // This callback clears the infoWindow if it is open
   function restoreContextCallback(method) {
      if (method) map.closeInfoWindow();      // "method" indicates this particular restore was for 
    }                                         // a zoom called by the method, not the regular DragZoom

    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(mapCenter, mapZoom);

        markerMgr = new MarkerManager(map);

        var otherOpts = {
          buttonStartingStyle: {display:"block",color:"black",background:"white",width:"7em",textAlign:"center",
            fontFamily:"Verdana",fontSize:"12px",fontWeight:"bold",border:"1px solid gray",cursor:"pointer"},
          buttonHTML: "Drag Zoom",
          buttonZoomingHTML: 'Drag a region on the map (click here to reset)',
          buttonZoomingStyle: {background:"yellow"},
          backButtonHTML: "Drag Zoom Back",  
          backButtonStyle: {display:"none",marginTop:"3px",background:"#FFFFC8"},
          backButtonEnabled: true, 
          overlayRemoveTime: 1500
        }; 
        var callbacks = {backbuttonclick:function(method){restoreContextCallback(method)}}
 
        map.addControl(DragZoom = new DragZoomControl({}, otherOpts, callbacks), 
          new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,7)));

        addMarkers();        // Add the cluster marker and the markers near Central Park and load into the Marker Manager
        markerMgr.refresh(); // Turn everything on
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
     <table width=900px style="text-align:left;border:1px solid black"><tr>
      <td style="font-size:14pt; padding-left:10px; padding-right:10px">
      <ul>
        <li>The map shows Greater New York. Use The DragZoom Button in the top left and select a rectangle encompassing 
            Manhattan (about 1/4 of the map).</li> 
        <li>A single cluster marker should appear on Central Park. Click on it.</li>
        <li>You should now see a closeup of the Central Park area with a number of markers indicating points of interest.  
            Notice also that the text on the back button has changed. Click on the markers and zoom in further using the DragZoom button.</li>
        <li>Now use the DragZoom back button.  It will take you back through the sequence.</li>
      </ul>
    </td></tr></table>
    <p>
    <div id="map" style="width:900px; height:600px; border:1px solid black"></div>

  </body>
</html>
